useListOffersForCollectible

Fetches all offers for a specific collectible This hook retrieves a list of active offers made on a specific collectible, including offer details like price, expiry, and maker information. Results can be filtered and paginated as needed.

Parameters

Name	Type	Description
args		Configuration for fetching offers
args		.chainId - The blockchain network ID
args		.collectionAddress - The collection contract address
args		.collectibleId - The specific token ID
args		.filter - Optional filter for offers
args		.page - Optional pagination configuration

Returns

returns.error - Error object if fetching fails

Make sure you have followed the Getting Started guide to get the collection address and chainId.

Example

Basic usage:

const { data: marketplaceConfig, isLoading: isMarketplaceConfigLoading } =
  useMarketplaceConfig();

const collection = marketplaceConfig?.market.collections[0];
const chainId = collection?.chainId as number;
const collectionAddress = collection?.itemsAddress as Address;
const collectibleId = "0";

const { data, isLoading } = useListOffersForCollectible({
  chainId,
  collectionAddress,
  collectibleId,
});

if (isLoading) return <div>Loading offers...</div>;

return (
  <div>
    <h3>{data?.offers.length || 0} offers</h3>
    {data?.offers.map((offer) => (
      <OfferCard key={offer.orderId} offer={offer} />
    ))}
  </div>
);

With sorting and pagination:

const { data } = useListOffersForCollectible({
  chainId: 1,
  collectionAddress: collectionAddress,
  collectibleId: tokenId,
  page: {
    page: 1,
    pageSize: 20,
  },
  sort:[{column: "price_usd", order: SortOrder.DESC}]
});
// Show highest offers first
const topOffers = data?.offers.slice(0, 3);

Checking for user’s offers:

const { address } = useAccount();
const { data } = useListOffersForCollectible({
  chainId,
  collectionAddress,
  collectibleId,
  filter: {
    createdBy: [String(userAddress)],
  },
});
const hasUserOffer = (data?.offers.length || 0) > 0;